<template>
  <div id="app">
    <app-header
      :user="user"
      @login="handleLogin"
      @logout="handleLogout"
      @view-profile="showUserInfo"
      @view-orders="handleViewOrders"
    />
    <!-- <template v-if="isLoginView">
      <login-view />
    </template>
<template v-else>
      <main class="container">
        <carousel :images="carouselImages" />
        <content-sections :sections="contentSections" />
      </main>
      <app-footer />
    </template> -->
    <router-view></router-view>
  </div>
</template>

<script>
import { ref, provide, onMounted } from "vue";
import { useRouter } from "vue-router";
import AppHeader from "./components/Header/Header.vue";
import LoginView from "./views/LoginView.vue";
import ForgetPasswordView from "./views/ForgetPasswordView.vue";
import RegisterView from "./views/RegisterView.vue";
import {
  user as userStore,
  restoreUserFromStorage,
  logoutUser,
} from "@/stores/user";

export default {
  name: "App",
  components: {
    AppHeader,
    LoginView,
    ForgetPasswordView,
    RegisterView,
  },
  setup() {
    // 使用 useRouter 获取 router 实例
    const router = useRouter();

    // 控制当前显示哪个认证组件：'login' | 'register' | 'forget' | null
    const authView = ref(null);
    // 控制是否显示登录页
    const isLoginView = ref(false);
    // 用户数据 - 初始状态为未登录
    const user = ref({
      name: "游客",
      avatar: new URL("@/assets/images/avatar/default.png", import.meta.url)
        .href,
      isLoggedIn: false,
    });

    // 同步用户状态
    const syncUserState = () => {
      if (userStore.isLoggedIn) {
        user.value.isLoggedIn = true;
        user.value.name = userStore.nickname || userStore.username || "用户";
        user.value.avatar = userStore.avatar
          ? `http://192.168.199.231:9000/fznostalgia/user/${userStore.avatar}`
          : new URL("@/assets/images/avatar/default.png", import.meta.url).href;
      } else {
        user.value.isLoggedIn = false;
        user.value.name = "游客";
        user.value.avatar = new URL(
          "@/assets/images/avatar/default.png",
          import.meta.url
        ).href;
      }
    };

    // 事件处理函数
    // 登录时只显示登录页
    // const handleLogin = () => {
    //   isLoginView.value = true
    //   console.log('进入登录页')
    // }
    // // 退出登录时恢复主内容
    // const handleLogout = () => {
    //   isLoginView.value = false
    //   user.value.isLoggedIn = false
    //   console.log('用户已登出')
    // }
    // const handleViewOrders = () => {
    //   console.log('查看我的订单')
    // }

    // 切换方法
    function handleLogin() {
      router.push("/login");
    }

    const showUserInfo = () => {
      router.push("/user-info");
    };
    const handleLogout = () => {
      // 清除用户状态
      logoutUser();
      // 同步本地状态
      syncUserState();
      router.push("/"); // 退出后跳转到首页
    };
    const handleViewOrders = () => {
      router.push("/my-orders");
    };
    const showRegister = () => {
      authView.value = "register";
    };
    const showLogin = () => {
      authView.value = "login";
    };
    const showForget = () => {
      authView.value = "forget";
    };
    const closeAuth = () => {
      (authView.value = null), (isLoginView.value = false);
    };

    // 应用启动时恢复用户状态
    onMounted(() => {
      restoreUserFromStorage();
      syncUserState();
    });

    // 提供用户状态给子组件
    provide("user", user);

    return {
      user,
      handleLogin,
      handleLogout,
      handleViewOrders,
      // isLoginView
      authView,
      showRegister,
      showLogin,
      showUserInfo,
      showForget,
      closeAuth,
    };
  },
};
</script>

<style>
/* 全局样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}

:root {
  --primary-color: #1a5f7a;
  --secondary-color: #3d8c9f;
  --accent-color: #f8b500;
  --light-color: #f5f5f5;
  --dark-color: #333;
}

body {
  background-color: #f9f9f9;
  color: var(--dark-color);
  line-height: 1.6;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar {
    flex-direction: column;
    padding: 15px 0;
  }

  .nav-links {
    margin-top: 15px;
  }

  .nav-links li {
    margin: 0 10px;
  }

  .carousel-container {
    height: 300px;
  }

  .section-title {
    font-size: 1.8rem;
  }
}
</style>
